﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Загрузчик</title>
    <script type="text/javascript" src="canvas.extensions.js"></script>
    <script type="text/javascript" src="customEvent.extensions.js"></script>
    <script type="text/javascript" src="openFileDialog.js"></script>
    <script type="text/javascript" src="uploader.js"></script>
</head>
<body>
    <button id="upload-button">Загрузить</button>
    <script>
        var openFileDialog = new Aquamarine.OpenFileDialog(["image/jpeg", "image/png"]);

        openFileDialog.addEventListener("changelist", function (e) {
            uploader.getThumbnails(e.detail.files, 100, 100);
        });

        var uploader = new Aquamarine.Uploader();

        //uploader.addEventListener("thumbnail", function (e) {
        //    var im = document.createElement("img");
        //    im.src = e.detail.base64;
        //    document.body.appendChild(im);
        //});

        uploader.addEventListener("allthumbnails", function (e) {
            for (var i = 0; i < e.detail.images.length; i++) {
                var im = document.createElement("img");
                im.src = e.detail.images[i].base64;
                document.body.appendChild(im);
            }

            uploader.save([e.detail.images[0].file], [{ width: 100, height: 100 }, { width: 300, height: 300 }], "http://ya.ru/save");

        });

        var button = document.getElementById("upload-button");
        button.onclick = function () {
            openFileDialog.open();
        };

        //uploader.onLoadImages = function (images) {
        //    console.log(images);
        //    for (var i = 0; i < images.length; i++) {
        //        var image = document.createElement("image");
        //        image.setAttribute("src", images[0].src);

        //        document.body.appendChild(image);
        //    }

        //    uploader.save(images, [{ width: images[0].width, height: images[0].height }]);
        //};
    </script>
</body>
</html>
